<template>
  <a-spin :spinning="confirmLoading">
    <JFormContainer :disabled="disabled">
      <template #detail>
        <div id="printContent">
          <h2 class="h-style">JSA分析卡</h2>
          <table id="staffLeaveTable">
            <tbody>
              <tr class="tr-style">
                <td class="firstTd">危害因素名称</td>
                <td class="firstTd">控制措施名称</td>
                <td class="firstTd">作业类型</td>
                <td class="firstTd">确认岗位</td>
                <td class="firstTd">签名确认</td>
              </tr>
              <tr class="tr-style" v-for="(jsaRecord,index) in jobTicketJsaAnalyzeList" :key="jsaRecord.index">
                <td class="firstTd">{{jsaRecord.hazardFactorName}}</td>
                <td class="firstTd">{{jsaRecord.controlMeasureName}}</td>
                <td class="firstTd">{{jsaRecord.jobType_dictText}}</td>
                <td class="firstTd">{{jsaRecord.confirmPost}}</td>
                <td class="firstTd">
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(jsaRecord.img)" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </JFormContainer>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
  import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
  import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
  import JCheckbox from "/@/components/Form/src/jeecg/components/JCheckbox.vue";
  import { getValueType } from '/@/utils';
  import { Form } from 'ant-design-vue';
  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
  import { useUserStore } from '/@/store/modules/user';
  import UserTable from '@/views/system/user/UserTable.vue';
  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
  import { printJS } from '/@/hooks/web/usePrintJS';
  
  const props = defineProps({
    formDisabled: { type: Boolean, default: false },
    formData: { type: Object, default: () => ({})},
    formBpm: { type: Boolean, default: true },
    jobTicketSecurityDisclosureRecord: { type: Object, default: () => ({})},
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    number: '',   
    applicant: '',
    applyCompany: '', 
    applyCompany_dictText: '',   
    applicant_dictText: '',
    applyTime: '',
    jobType: '',
    jobType_dictText: '',
    content: '',
    cell: '',  
    cell_dictText: '',
    hotMode: '',
    hotLevel_dictText: '',
    operationCompany: '',  
    operationManager: '',
    companyGuardian: '',
    constructionGuardian: '',  
    operatorAndCode: '',
    relevanceNumber: '', 
    riskIdentificationResult: '',
    riskIdentificationResult_dictText: '',  
    planStartDate: '',
    planEndDate: '',   
    actualStartDate: '',
    actualEndDate: '',
    eventDate: '',
    
    
    device: '',   
    position: '',   
    operationCompanyId: '',
    operationChargePerson: '',   
    constructionMan: '',   
    locations: '',   
    orientation: '',   
    videoId: '',   
    status: '',   
    deleted: '',   
  });
  const jobTicketJsaAnalyzeList = ref();
  const { createMessage } = useMessage();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  //表单验证
  const validatorRules = reactive({
    content: [{ required: true, message: '请输入作业内容!'},],
  });
  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
  
  const userStore = useUserStore();
  const htmlContent = ref();

  // 表单禁用
  const disabled = computed(()=>{
    if(props.formBpm === true){
      if(props.formData.disabled === false){
        return false;
      }else{
        return true;
      }
    }
    return props.formDisabled;
  });
  
  
  /**
   * 新增
   */
  function add() {
    /* 获取编号之后再进行页面渲染*/
  }

  /**
   * 编辑
   */
  function edit(records) {
    nextTick(() => {
      jobTicketJsaAnalyzeList.value = records;
    });
  }
  
  function onPrint() {
    printJS({
      printable: '#printContent',
      type: 'html',
    });
  }

  defineExpose({
    add,
    edit,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 14px;
    border: 3px solid #000000; /* 设置边框颜色和宽度 */
    border-radius: 3px; /* 设置边框圆角 */
  }
  #printContent {
    //border: 1px solid black;
    width: 85%; /* 宽度是父元素宽度的一半 */
    //height: 90%; /* 高度是父元素高度的一半 */
    margin: 20px auto; /* 水平居中并添加外边距 */
    //border-radius: 10%; /* 设置圆角半径为宽度或高度的一半 */
    //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置边框阴影 */
  }
  #staffLeaveTable {
    width: 100%;
    table-layout: fixed;
  }
  #sonTable {
    width: 100%;
    table-layout: fixed;
  }
  .tr-style {
    border: 1px solid black;
  }
  .h-style {
    text-align: center;
  }
  .firstTd {
    border: 1px solid black;
    font-size: 16px;
    word-wrap: break-word;
  }
  .sonTd {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    font-size: 16px;
    word-wrap: break-word;
  }
  .colsTd {
    text-align: center;
    border: 1px solid black;
  }
  .colsTdImg {
    text-align: center;
    width: 40%;
    heigth: 30%;
  }
</style>
